<template>
  <div>
    <el-card v-if="rtuPortDisplays.length > 0">
      <div slot="header" class="clearfix flex">
        <b>实时状态</b>
        <span class="text">状态更新时间：{{ currentDevice.states.datatime }}</span>
      </div>
      <div v-if="showFkq || showQf || showSpj">
        <div class="state-img" style="text-align: center;width:40%;float:left;margin:24px auto;">
          <template v-if="showFkq"><img :src="imageUrl" style="height:240px;"></template>
          <template v-if="showQf">
            <div :class="qfbg"><img :src="imageUrl" :style="imageStyle"></div>
          </template>
          <template v-if="showSpj"><img :src="imageUrl" style="margin:24rpx 0;width:60%;"></template>
        </div>
        <div class="state-container">
          <dl v-for="(item,index) in rtuPortDisplays" :key="index" class="img-width">
            <dt :class="getClass(item)">{{ getState(item) }}<em>{{ item.unit }}</em></dt>
            <dd class="iconfont" :class="item.iconfont" />
            <dd class="name">{{ item.name }}</dd>
          </dl>
        </div>
      </div><div v-else class="state-container">
        <template v-if="rtuPortDisplays.length <= 12">
          <dl v-for="(item,index) in rtuPortDisplays" :key="index">
            <dt :class="getClass(item)">{{ getState(item) }}<em>{{ item.unit }}</em></dt>
            <dd class="iconfont" :class="item.iconfont" />
            <dd class="name">{{ item.name }}</dd>
          </dl>
        </template>
        <template v-else>
          <dl v-for="(item,index) in rtuPortDisplays" :key="index" class="min-width">
            <dt :class="getClass(item)">{{ getState(item) }}<em>{{ item.unit }}</em></dt>
            <dd class="iconfont" :class="item.iconfont" />
            <dd class="name">{{ item.name }}</dd>
          </dl>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDeviceState } from '@/utils/device'
import { runDict, closeDict, dclassCodeMap } from '@/utils/constant'
export default {
  data() {
    return {
      rtuPortDisplays: [],
      states: {}
    }
  },
  computed: {
    ...mapGetters(['currentDevice']),
    dclass() {
      return +this.currentDevice.product_type
    },
    showFkq() {
      return this.dclass === +dclassCodeMap.fkq && this.currentDevice.product.model === 'V6.0'
    },
    showQf() {
      return this.dclass === +dclassCodeMap.qf
    },
    showSpj() {
      return this.dclass === +dclassCodeMap.spj
    },
    showImage() {
      const version = this.currentDevice.product.model
      return this.dclass === +dclassCodeMap.qf || this.dclass === +dclassCodeMap.spj || (this.dclass === +dclassCodeMap.fkq && version === 'V6.0')
    },
    imageUrl() {
      if (this.dclass === dclassCodeMap.fkq) {
        const states = this.states
        const CH1_SW = states.CH1_SW || 0
        const CH2_SW = states.CH2_SW || 0
        return `http://api.zesi.com.cn/storage/fkq/${CH1_SW}${CH2_SW}.png`
      }
      if (+this.currentDevice.product_type === dclassCodeMap.qf) {
        return `http://api.zesi.com.cn/storage/qf/qf.png`
      }
      if (+this.currentDevice.product_type === dclassCodeMap.spj) {
        const states = this.states
        const P1 = states.P1 || 0
        const P2 = states.P2 || 0
        if (+P1 === 0) {
          return `http://api.zesi.com.cn/storage/spj/0.png`
        } else {
          return `http://api.zesi.com.cn/storage/spj/${P1}${P2}.png`
        }
      }
      return ''
    },
    imageStyle() {
      const A = (this.states && this.states.A) || 90
      const degree = Math.round(A / 100)
      let marginTop = '30px'
      if (this.currentDevice.rtuActionDisplays.filter((val) => {
        return val.name === '3#口'
      }).length > 0) {
        marginTop = '168px'
      }
      return {
        marginTop,
        height: `120px`,
        transform: `rotate(${degree - 90}deg)`,
        transition: 'transform 0.5s ease' // 可选的过渡效果
      }
    },
    qfbg() {
      const A = (this.states && this.states.A) || 90
      const degree = Math.round(A / 100)

      if (this.currentDevice.rtuActionDisplays.filter((val) => {
        return val.name === '3#口'
      }).length > 0) {
        if (degree >= 0 && degree <= 90) {
          return 'stf1'
        }
        if (degree >= 90 && degree <= 180) {
          return 'stf2'
        }
        if (degree >= 180 && degree <= 270) {
          return 'stf3'
        }
        if (degree >= 270 && degree <= 360) {
          return 'stf4'
        }
      } else {
        if (degree >= 89 && degree <= 90) {
          return 'qfbg'
        }
        if (degree > 90 && degree <= 270) {
          return 'qfbg2'
        }
        return 'qfbg1'
      }
      return ''
    }
  },
  watch: {
    currentDevice: {
      handler(newVal, oldVal) {
        console.log(newVal)
        this.rtuPortDisplays = newVal.rtuPortDisplays.filter((val) => {
          return +val.show_state > 0
        })
        let extra_states = {}
        if (newVal.join_serialno) {
          const join_serialnos = newVal.join_serialno.split(',')
          join_serialnos.forEach(serialno => {
            extra_states = { ...extra_states, ...this.$store.getters.getDeviceStates(serialno) }
          })
        }
        this.states = { ...newVal.states, ...extra_states }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getState(item) {
      return getDeviceState(this.states[item.namekey], item, this.states)
    },
    getClass(item) {
      if (runDict.includes(this.getState(item))) {
        return 'color-success'
      }
      if (closeDict.includes(this.getState(item))) {
        return 'color-danger'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.text{
  margin-left:auto;
}
.state-container{
  display:flex;
  flex-wrap: wrap;
  justify-content:flex-start;
  margin-top: -20px;
  padding: 12px 0;
  dl{
    display:flex;
    flex:1;
    flex-direction:column;
    margin-top:32px;
    text-align:center;
    color:#666;
    &.img-width{
      width: calc(100% / 6);
      min-width: calc(100% / 6);
      max-width: calc(100% / 6);
    }
    &.min-width{
      width: calc(100% / 12);
      min-width: calc(100% / 12);
      max-width: calc(100% / 12);
    }
    dt{
      font-weight:bold;
      font-size:16px;
      color:#333;
      &.color-success{
        color:#13ce66
      }
      &.color-warning{
        color:#FFBA00
      }
      &.color-danger{
        color:#ff4949
      }
      em{
        font-style:normal;
        font-size:14px;
        padding-left:4px;
      }
    }
    dd{
      &.iconfont{
        font-size: 18px;
        margin-top: 12px;
      }
      &.name{
        font-size: 12px;
        margin-top: 14px;
      }
    }
  }
}
.qfbg {
	background: url(https://api.zesi.com.cn/storage/qf/qfbg.png) no-repeat;
	background-size: 100%;
	height: 180px;
}
.qfbg1 {
	background: url(https://api.zesi.com.cn/storage/qf/qfbg1.png) no-repeat;
	background-size: 100%;
	height: 180px;
}
.qfbg2 {
	background: url(https://api.zesi.com.cn/storage/qf/qfbg2.png) no-repeat;
	background-size: 100%;
	height: 180px;
}
.stf1 {
	background: url(https://api.zesi.com.cn/storage/qf/stf1.png) no-repeat;
	background-size: 100%;
	height: 450px;
}
.stf2 {
	background: url(https://api.zesi.com.cn/storage/qf/stf2.png) no-repeat;
	background-size: 100%;
	height: 450px;
}
.stf3 {
	background: url(https://api.zesi.com.cn/storage/qf/stf3.png) no-repeat;
	background-size: 100%;
	height: 450px;
}
.stf4 {
	background: url(https://api.zesi.com.cn/storage/qf/stf4.png) no-repeat;
	background-size: 100%;
	height: 680px;
}
</style>
